import React from "react"
// import './index.scss'
import styles from './index.module.css'
import NavHeader from "../../components/NavHeader";
// import axios from "axios"
import { API } from "../../utils/api"   //导入优化后的axios
import { BASE_URL } from "../../utils/url" //配置统一的URL
import { Link } from "react-router-dom";
import { Toast } from 'antd-mobile'
import HouseItem from "../../components/HouseItem"
const BMap = window.BMap
// 覆盖物的样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255,0,0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rbg(255,255,255)',
    textAlign: 'center'
}
export default class Map extends React.Component {
    state = {
        //小区下的房源信息
        housesList: [],
        //是否展示小区下的房源信息
        isShowList: false
    }
    componentDidMount() {

        // 渲染地图
        this.renderMap();

    }
    //渲染地图的函数
    renderMap() {
        // console.log(11);
        const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))  //获取当前城市
        // 在react脚手架全局对象用window来访问
        const map = new BMap.Map("container")
        //能够在其他方法中调用map
        this.map = map
        //创建地址解析器实例
        const myGeo = new BMap.Geocoder();
        myGeo.getPoint(label, async point => {
            if (point) {
                map.centerAndZoom(point, 11);  //11是比例
                // 下面是控件
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());
                map.addControl(new BMap.MapTypeControl());
                map.addControl(new BMap.GeolocationControl())
                //调用渲染覆盖物入口
                this.renderOverlays(value)
                //获取房源信息
                // let res = await axios.get(`http://localhost:8080/area/map?id=${value}`)

                // res.data.body.forEach(item => {
                //     // 给每一条数据添加覆盖物
                //     // 得到返回的经纬度信息
                //     let { coord: { longitude, latitude }, label: areaName, count, value } = item
                //     // 创建覆盖物
                //     let areaPosition = new BMap.Point(longitude, latitude)
                //     let label = new BMap.Label('', {
                //         position: areaPosition,
                //         offset: new BMap.Size(-35, -35)
                //     })
                //     // 给label添加唯一标识
                //     label.id = value
                //     // 设置覆盖物内容
                //     label.setContent(`<div class="${styles.bubble}">
                //     <p class="${styles.name}">${areaName}</p>
                //    <p>${count}套</p>
                //    </div>`)
                //     // 设置样式
                //     label.setStyle(labelStyle)
                //     //覆盖物点击事件
                //     label.addEventListener('click', () => {
                //         console.log(11);
                //         // 当点击了覆盖物，要以当前点击的覆盖物为中心来放大地图
                //         // map.centerAndZoom(areaPosition, 13);
                //         // // 定时器解决清除覆盖物的时候，百度地图js报错问题
                //         // setTimeout(function () {
                //         //     map.clearOverlays()
                //         // }, 0)
                //     })
                //     // 添加到地图上
                //     //     map.addOverlay(label)
                // })
            } else {
                alert('您选择的地址没有解析到结果！');
            }
        }, label)

        //给地图绑定移动事件 关闭房屋详情
        map.addEventListener('movestart', () => {

            if (this.state.isShowList) {
                this.setState({
                    isShowList: false
                })
            }
        })


    }
    //   渲染覆盖物入口
    async renderOverlays(id) {
        try {
            //开启loading效果
            Toast.loading('加载中...', 0, null, false)
            // 获取房源信息
            let res = await API.get(`/area/map?id=${id}`)
            //关闭loading
            Toast.hide()
            let data = res.data.body
            let { type, nextZoom } = this.getTypeAndZoom()
            // 遍历，调用createOverlays,创建覆盖物
            data.forEach(item => {
                this.createOverlays(item, type, nextZoom)
            })
        }
        catch (error) {
            console.log(error)
            //关闭loading
            Toast.hide()
        }
    }
    /**
     * 获取对应要绘制的类型和缩放的比例
       */
    getTypeAndZoom() {
        // 获取当前地图缩放级别
        let zoom = this.map.getZoom()
        let nextZoom, type;
        if (zoom >= 10 && zoom < 12) {
            nextZoom = 13;
            // circle 表示绘制圆形的覆盖物，区
            type = "circle"
        } else if (zoom >= 12 && zoom < 14) {
            nextZoom = 15
            // circle 表示绘制圆形的覆盖物，镇
            type = "circle"
        } else if (zoom >= 14 && zoom < 16) {
            // circle 表示绘制矩形的覆盖物，小区
            type = "rect"
        }
        return { nextZoom, type }
    }

    /**
     * 绘制覆盖物的方法，根据type来判断绘制的是圆形还是矩形
     */
    createOverlays(data, type, Zoom) {
        // 得到返回的数据信息
        let { coord: { longitude, latitude }, label: areaName, count, value } = data
        let point = new window.BMap.Point(longitude, latitude)
        // 判断需要渲染的是哪种类型
        if (type === 'circle') {
            // 区 或者 镇
            this.createCircle(point, areaName, count, value, Zoom)
        } else if (type === 'rect') {
            // 小区
            this.createRect(point, areaName, count, value)
        }
    }
    // 绘制区 或者 镇
    createCircle(point, areaName, count, value, Zoom) {
        // 创建覆盖物
        let label = new BMap.Label('', {
            position: point,
            offset: new BMap.Size(-35, -35)
        })
        // // 给label添加唯一标识
        // label.id = value
        // 设置覆盖物内容
        label.setContent(`<div class="${styles.bubble}">
                    <p class="${styles.name}">${areaName}</p>
                   <p>${count}套</p>
                   </div>`)
        // 设置样式
        label.setStyle(labelStyle)
        //覆盖物点击事件
        label.addEventListener('click', () => {

            this.renderOverlays(value)
            // 当点击了覆盖物，要以当前点击的覆盖物为中心来放大地图
            this.map.centerAndZoom(areaName, Zoom);
            // 定时器解决清除覆盖物的时候，百度地图js报错问题
            setTimeout(() => {
                this.map.clearOverlays()
            }, 0)
        })

        // 添加到地图上
        this.map.addOverlay(label)

    }
    // 绘制// 小区
    createRect(point, areaName, count, value) {
        let label = new BMap.Label('', {
            position: point,
            offset: new BMap.Size(-50, -28)
        })

        // 设置覆盖物内容
        label.setContent(`<div class="${styles.rect}">
       <span class="${styles.housename}">${areaName}</span>
       <span class="${styles.housenum}">${count}套</span>
       <i class="${styles.arrow}"></i>
    </div>`)
        // 设置样式
        label.setStyle(labelStyle)
        // // 给label添加唯一标识
        // label.id = value
        //覆盖物点击事件
        label.addEventListener('click', (e) => {
            //获取小区的信息 
            this.getHouseList(value)
            //获取当前点击项坐标
            const { clientX, clientY } = e.changedTouches[0]
            // 地图移动到正中央
            this.map.panBy(
                window.innerWidth / 2 - clientX,
                (window.innerHeight - 330) / 2 - clientY
            )
        })
        // 添加到地图上
        this.map.addOverlay(label)
    }
    //获取小区的信息 
    async getHouseList(id) {
        try {
            //开启loading效果
            Toast.loading('加载中...', 0, null, false)
            let res = await API.get('/houses?cityId=' + id)
            //关闭loading
            Toast.hide()
            this.setState({
                housesList: res.data.body.list,
                isShowList: true
            })
        }
        catch (e) {
            console.log(e);
            //关闭loading
            Toast.hide()
        }
    }

    // 渲染房屋列表的item方法
    /**
     * 渲染房源列表
     */
    renderHousesList() {
        return this.state.housesList.map(item =>
            <HouseItem key={item.houseCode} src={BASE_URL + item.houseImg} title={item.title} desc={item.desc} tags={item.tags} price={item.price} />
        )
    }

    render() {
        return (

            <div className={styles.map} >

                {/* 导航栏 */}
                <NavHeader onleftClick={() => {
                    this.props.history.go(-1)
                }}>
                    地图找房
                </NavHeader >

                {/* 地图容器元素 */}
                < div id="container" className={styles.container} > </div >
                {/* 房源列表 //结构 */}
                <div className={[
                    styles.houseList,
                    this.state.isShowList ? styles.show : ''
                ].join(' ')}>

                    <div className={styles.titleWrap}>
                        <h1 className={styles.listTitle}>房屋列表</h1>
                        <Link className={styles.titleMore} to="/home/list">
                            更多房源</Link>
                    </div>

                    <div className={styles.houseItems}>
                        {/* 房屋结构 */}
                        {this.renderHousesList()}
                    </div>



                </div>

            </div >
        )
    }
}